<template>
<div class="wechat-merchant-receipt">
    <!-- 商家信息 -->
    <div class="merchant-info">
    <h2>商家名称：[商家名称]</h2>
    <p>商家地址：[商家地址]</p>
    <p>联系电话：[联系电话]</p>
    </div>
    <!-- 订单信息 -->
    <div class="order-info">
    <h3>订单详情</h3>
    <table>
        <thead>
        <tr>
            <th>商品名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <!-- 这里可以通过 v-for 循环渲染商品列表 -->
        <tr v-for="(item, index) in orderItems" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.quantity * item.price }}</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="3">总计</td>
            <td>{{ totalPrice }}</td>
        </tr>
        </tfoot>
    </table>
    </div>
    <!-- 支付信息 -->
    <div class="payment-info">
    <h3>支付信息</h3>
    <p>支付方式：微信支付</p>
    <p>支付时间：[支付时间]</p>
    <p>订单号：[订单号]</p>
    </div>
    <!-- 底部信息 -->
    <div class="footer-info">
    <p>感谢惠顾，欢迎下次光临！</p>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            orderItems: [
                { name: '商品1', quantity: 1, price: 10 },
                { name: '商品2', quantity: 2, price: 20 },
            ],
        };
    },
    computed: {
        totalPrice() {
        return this.orderItems.reduce((total, item) => {
            return total + item.quantity * item.price;
        }, 0);
        },
    },
    created(){

    },  
    methods: {
        // 其他方法...
        getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        },

        Back(){
            let mchData ={action:'jumpOut', jumpOutUrl:_showUrl}
            let postData = JSON.stringify(mchData)
            parent.postMessage(postData,'https://payapp.weixin.qq.com')
        },

        getData(){
            $.ajax({
                method: 'post',
                url: _url,
                data: _params,
                success: function(data) {
                    console.log(data);
                    let res=data.entity;
                    if(!data.isSucc) return;
                    $("#payPos").text(res.subject)
                    let way=res.payWay;
                    let html=way=='122'?'微信付款码支付':way=='121'?'微信扫码支付':way=='701'?"微信公众号支付":'微信小程序支付';
                    $("#payWay").text(html)
                    $("#payMoney").text(res.totalFee)
                    $("#payOrder").text(res.orderNo)
                    $("#payTime").text(res.transTime)
                    if(res.remark){
                        $("#payRemark").text(res.remark)
                    }
                    if(res.showUrl){
                        _showUrl=res.showUrl;
                        $("#showBtn").show();
                    }
                // 初始化小票
                let initData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE'};
                let postData = JSON.stringify(initData);
                    //与ifarem  交互
                parent.postMessage(postData,'https://payapp.weixin.qq.com');
                },
                error: function(err) {
                    //console.log(err)
                },
                complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数
                    console.log(status);
                    
                }
            });
        }

    }
}
</script>

<style scoped>
.wechat-merchant-receipt {
font-family: Arial, sans-serif;
padding: 20px;
border: 1px solid #ccc;
width: 300px;
margin: 20px auto;
}

.merchant-info,
.order-info,
.payment-info,
.footer-info {
margin-bottom: 20px;
}

table {
width: 100%;
border-collapse: collapse;
}

th,
td {
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}

tfoot td {
font-weight: bold;
}
</style>
